Wisconsin HTML5 Map 3.0
We introduce a brand new map powered by JavaScript. This HTML5 interactive map is perfect for any business to visually represent your business geography: display local offices, dealers, reps, warehouses, stores, support centers etc. and to direct customers to an appropriate landing page on your website.
The map is suitable for displaying on any device including iPhone, iPad, Android and obviously on all major desktop browsers. The interactive map shows clickable areas* which you can assign a landing page URL with. Easily adjustable colors, links and popup balloons and other settings allow you to tune the map view to your needs.
The term "area" means one of the following: region, state, country, province, county or district, depending on the particular map
Features
- Best for real-estate, dealer maps, branch offices location and any geographical-related information
- Responsive/static size of the interactive map
- Popup tooltips to display detailed information on mouse over
- Works with any mobile devices including iPhone, iPad, Android
- Shows pinpoint markers
- Simple visual customization of the map look
- Wide customizing capabilities
What's new
Version 3.0
Version 3.0 features brand new online map editor. Now, you configure the map 100% visually and then simply copy JSON code to the settings.js file or download ready-made settings.js.
Install HTML5 Map
To install the map on your site, add the following code to the HTML source of the page:
<!-- start Fla-shop.com HTML5 Map -->
<div id='map-container'></div>
<link href="map.css" rel="stylesheet">
<script src="raphael.min.js"></script>
<script src="settings.js"></script>
<script src="paths.js"></script>
<script src="map.js"></script>
<script>
var map = new FlaMap(map_cfg);
map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->
Note that you should upload all files to your server first. Make sure you have specified the full path to the files in the code including subfolders. For example
<!-- start Fla-shop.com HTML5 Map -->
<div id='map-container'></div>
<link href="/directory/map.css" rel="stylesheet">
<script src="/directory/raphael.min.js"></script>
<script src="/directory/settings.js"></script>
<script src="/directory/paths.js"></script>
<script src="/directory/map.js"></script>
<script>
var map = new FlaMap(map_cfg);
map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->
Visual editor
To change the map settings, you can use the online editor located at
After you set the map preferences, you can export the settings and download the settings.js file.
Don't forget to upload the updated settings.js back to your website.
You can also edit the settings.js file manually using any third-party text editor. We advise you to use free Notepad++ for Windows, or Sublime Text 3 for Windows, Mac, Linux.
Certainly, you can use any other HTML and plaintext editors as well.
Settings
Here is the list of map parameters you can change. The "Basic map settings" section specifies parameters of the entire map. The "Areas settings" parameters allow you to tune the view and behavior of a specific area (country, state, county, district and other geographic units).
Basic map settings
Parameter name | Values | Description |
mapWidth | 400 | Map width in pixels. If 0 - map width will be 100% (responsive mode) |
mapHeight | 450 | Map height. If width = 0 - will be ignored |
shadowWidth | 2 | Shadow width |
shadowOpacity | 0.3 | Shadow opacity |
shadowColor | "black" | Shadow color. Can be in #rgb format |
shadowX | 1 | Shadow offset by X coordinate |
shadowY | 2 | Shadow offset by Y coordinate |
iPhoneLink | true/false | If 'true' - the URL is opened immediately. Useful if you don't need to display a popup window. If 'false' - the first tap displays a popup window for the selected area. The second tap opens the URL. |
isNewWindow | true/false | Whether to open new links in a new window or in the current one |
zoomEnable | true/false | Whether zoom capabilities are enabled or not |
zoomEnableControls | true/false | Whether zoom controls are available or not |
zoomMax | 2 | |
zoomStep | 0.2 | This setting is used by scroll zooming and zoomIn and zoomOut methods |
borderColor | Hex value | The color of region's borders |
borderColorOver | Hex value | Color of the border for active region |
nameColor | Hex value | Name colors (used with short name) |
nameFontSize | 11px | Short name font size |
nameFontWeight | bold/normal | Short name boldness. Can be "normal" or "bold" |
nameStroke | true/false | Whether short names should have stroke or not |
overDelay | secs | Animation duration in milliseconds |
Areas* settings
Parameter name | Values | Description |
id | number | The id of a region. Must not be changed |
name | text | The name of a region |
shortname | text | The abbreviated name of a region |
link | text | The landing page URL. May include JS code |
comment | HTML formatted text | The text of the popup window. May include HTML formatting |
image | text | The file name of the image to display in a popup |
color_map | Hex value | The color of a region. Default color #7798BA |
color_map_over | Hex value | The color of a region when the mouse cursor is over it. Default color #366CA3 |
The term "area" means one of the following: region, state, country, province, county or district, depending on the particular map
API specification
Version 2.0+ use new API with improved functions, you can find API description by following this link.
Fla-shop.com Licensing Information
- Single Site License
Thank you for using our product. Please feel free to contact us with any questions regarding our product.
More maps and information on website Fla-shop.com